<template>
  <el-card style="width: 1200px; margin: 0 auto" shadow="always">
    <el-button
      style="margin: 20px 0"
      type="primary"
      icon="el-icon-plus"
      @click="SwitchAttr"
      :disabled="Category3Id ? false : true"
      >添加属性</el-button
    >
    <el-table border :data="AttrList" style="width: 100%" class="mt-20">
      <el-table-column label="序号" type="index" width="100"> </el-table-column>
      <el-table-column prop="attrName" label="属性名称" width="180">
      </el-table-column>
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag
            style="margin-right: 10px"
            type="success"
            v-for="item in row.attrValueList"
            :key="item.id"
            >{{ item.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="{ row }">
          <el-button
            style="margin-right: 10px"
            type="primary"
            icon="el-icon-edit-outline"
            @click="SwitchEditMode(row)"
            size="small"
          ></el-button>
          <!-- @onConfirm="" -->
          <el-popconfirm title="确定删除分类吗?" @onConfirm="deleteAttr(row)">
            <el-button
              type="danger"
              icon="el-icon-delete"
              slot="reference"
              size="small"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { DelAttrInfoApi } from '@/api/AttrApi'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'AttrList',
  data() {
    return {}
  },
  mounted() {
    if (!this.Category3Id) return
    this.GetAttrInfoList()
  },
  computed: {
    ...mapState('sortStore', [
      'Category1Id',
      'Category2Id',
      'Category3Id',
      'AttrList'
    ])
  },
  methods: {
    ...mapActions('sortStore', ['GetAttrInfoList']),
    SwitchAttr() {
      this.$emit('SwitchAttrComponents', '2')
    },
    async deleteAttr(row) {
      const res = await DelAttrInfoApi(row.id)
      if (res.code === 200) {
        this.GetAttrInfoList()
      }
    },
    SwitchEditMode(row) {
      console.log(row)
      this.$store.dispatch('sortStore/EditAttrInfo', {
        attrName: row.attrName,
        attrValueList: row.attrValueList,
        attrid: row.id
      })
      this.SwitchAttr()
    }
  },
  watch: {
    Category3Id: {
      handler() {
        if (!this.Category3Id) return
        this.GetAttrInfoList()
      },
      immediate: true //立即执行
    }
  },
  props: {
    isShowAttrComponents: {
      type: String
    }
  }
}
</script>

<style scoped></style>
